<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <style>
        body{
            background:#222222;
            color:#ffffff;
        }
        .formApp{
            color:#ffffff;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index.html">首页</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="row">
        <h3>Demo1: angularjs ui router表单分步骤示例，参考：
            <a href="https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router"
               target="_blank">https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router</a>
        </h3>
        <div class="formApp" ng-app="formApp">
            <!--视图在这里被注入 -->
            <div class="container">
                <div ui-view></div>
            </div>

            <!--<div class="row">-->
            <!--<div class="col-sm-8 col-sm-offset-2">-->
            <!--<div class="jumbotron text-muted text-center">-->
            <!--<p>a tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>-->

            <!--<p><a href="http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router">Create-->
            <!--a Multi-Step Form Using Angular and UI-Router</a></p>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
</body>
</html>
<script src="../static/js/angular-1.3.15/angular.js" type="text/javascript"></script>
<script src="../static/js/angular-ui-router-0.2.4/angular-ui-router.js"></script>
<script src="../static/js/angular-1.3.15/angular-animate.js"></script>
<script>

    // create our angular app and inject ngAnimate and ui-router
    // =============================================================================
    angular.module('formApp', ['ngAnimate', 'ui.router'])

    // configuring our routes
    // =============================================================================
            .config(function ($stateProvider, $urlRouterProvider) {
                $stateProvider
                    // route to show our basic form (/form)
                        .state('form', {
                            url: '/form',
                            templateUrl: 'form.html',
                            controller: 'formController'
                        })

                    // nested states
                    // each of these sections will have their own view
                    // url will be nested (/form/profile)
                        .state('form.profile', {
                            url: '/profile',
                            templateUrl: 'form-profile.html'
                        })

                    // url will be /form/interests
                        .state('form.interests', {
                            url: '/interests',
                            templateUrl: 'form-interests.html'
                        })

                    // url will be /form/payment
                        .state('form.payment', {
                            url: '/payment',
                            templateUrl: 'form-payment.html'
                        });

                // catch all route
                // send users to the form page
                $urlRouterProvider.otherwise('/form/profile');
            })

        // our controller for the form
        // =============================================================================
            .controller('formController', function ($scope) {

                // we will store all of our form data in this object
                $scope.formData = {};

                // function to process the form
                $scope.processForm = function () {
                    alert('awesome!');
                };

            });
</script>
